<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="./lib/vue.js"></script>
  <script src="./lib/vue-resource.js"></script>
  <link rel="stylesheet" href="./lib/bootstrap.css">
</head>

<body>
  <div id="app">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">添加品牌</h3>
        </div>
        <div class="panel-body form-inline">
            <label>
                Name:
                <input type="text" class="form-control"  v-model="name">
            </label>
            <!-- 在vue中,使用事件绑定机制,为元素指定处理函数的时候,如何加了小括号,就可以给函数传参了 -->
            <input type="button" class="btn btn-primary" value="添加" @click="add">
        </div>
    </div>

    <table class="table table-bordered tabel-hover table-striped">
      <thead>
        <tr>
          <th>createTime</th>
          <th>distributorId</th>
          <th>headImg</th>
          <th>id</th>
          <th>identity</th>
          <th>isDelete</th>
          <th>level</th>
          <th>mxb</th>
          <th>nickname</th>
          <th>playerId</th>
          <th>updateTime</th>
          <th>operation</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="p in list" :key="p.id">
          <td>{{p.createTime}}</td>
          <td>{{p.distributorId}}</td>
          <td>{{p.headImg}}</td>
          <td>{{p.id}}</td>
          <td>{{p.identity}}</td>
          <td>{{p.isDelete}}</td>
          <td>{{p.level}}</td>
          <td>{{p.mxb}}</td>
          <td>{{p.nickname}}</td>
          <td>{{p.playerId}}</td>
          <td>{{p.updateTime}}</td>
          <td>
            <a href="" @click.prevent='del(p.id)'>删除</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <script>
    // 如果通过全局配置请求的接口的根域名,在每次单独发起的请求不能带有 / ,否则请求路径失效
    Vue.http.options.root = 'http://192.168.2.80:8080/manage-player/';

    var vm = new Vue({
      el: '#app',
      data: {
        name: '',
        list: []
      },
      methods: {
        add() {

        },
        del(id){

        },
        getAllList() {
          this.$http.get('player/page',{params: {currentPage: 1,pageSize: 10}})
          .then(result => {
            if(result.data.code === 0){
              console.log(result.data);
              this.list = result.data.data.infos;
            }
          })
        }
      },
      created() {
        this.getAllList()
      }
    })
  </script>



</body>

</html>
